<template>
  <el-table
    :data="tabledata"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :header-cell-style="{
      height: '100px',
      fontSize: '15px',
      color: 'black',
      backgroundColor: 'antiquewhite',
    }"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      prop="enterpriseID"
      label="企业编号"
      width="90"
      align="center"
    />
    <el-table-column
      prop="enterpriseFullName"
      label="企业全称"
      align="center"
      width="90"
    />
    <el-table-column
      prop="enterpriseAbbreviation"
      label="企业简称"
      align="center"
      width="90"
    />
    <el-table-column label="企业LOGO" width="120">
      <template #default="scope">
        <img
          :src="scope.row.enterpriseUpload"
          alt=""
          style="width: 50px; height: 50px"
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="industryLabelsName"
      label="一级行业"
      align="center"
      width="90"
    />
    <el-table-column
      prop="industryName"
      label="二级行业"
      align="center"
      width="90"
    />
    <el-table-column prop="provinceName" label="省" align="center" />
    <el-table-column prop="cityName" label="市" align="center" />
    <el-table-column prop="countyName" label="县" align="center" />
    <el-table-column
      prop="enterpriseAddress"
      label="详细地址"
      align="center"
      width="120"
    />
    <el-table-column
      prop="enterprisePhone"
      label="企业电话"
      align="center"
      width="120"
    />
    <el-table-column
      prop="enterpriseUnified"
      label="统一社会信用代码"
      align="center"
      width="120"
    />
    <el-table-column
      prop="enterpriseDescription"
      label="描述"
      align="center"
      width="150"
    />
    enterpriseDeactivated
    <el-table-column label="是否停用" width="90">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.enterpriseDeactivated == 0"
          >是</el-tag
        >
        <el-tag type="danger" v-if="scope.row.enterpriseDeactivated == 1"
          >否</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column prop="enterpriseHead" label="负责人" align="center" />
    <el-table-column
      prop="enterpriseFinance"
      label="财务负责人"
      align="center"
      width="110"
    />
    <el-table-column
      prop="enterpriseCharge"
      label="分管负责人"
      align="center"
      width="110"
    />
    <el-table-column
      prop="enterprisePerson"
      label="可查看人员"
      align="center"
      width="110"
    />
    <el-table-column
      prop="accountingUnitName"
      label="核算单元"
      align="center"
      width="90"
    />
  </el-table>

  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="form.pageindex"
          v-model:page-size="form.pagesize"
          :page-sizes="[2, 4, 6, 8, 12, 14, 16, 18, 20]"
          :size="size"
          layout="total, sizes, slot"
          :total="form.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          >，共{{ form.totalPage }}页
          <el-button @click="handleCurrentChange(1)">首页</el-button>
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="form.pageindex"
          v-model:page-size="form.pagesize"
          :page-sizes="[2, 4, 6, 8, 12, 14, 16, 18, 20]"
          :size="size"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :total="form.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </td>
      <td>
        <el-pagination
          v-model:current-page="form.pageindex"
          v-model:page-size="form.pagesize"
          :page-sizes="[2, 4, 6, 8, 12, 14, 16, 18, 20]"
          :size="size"
          layout="slot,jumper"
          :total="form.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(form.totalCount)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, type UploadProps } from 'element-plus';
import router from '@/router';
const size = ref<'default' | 'large' | 'small'>('default');
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  form.pagesize = val;
  getdata();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  form.pageindex = val;
  getdata();
};

const form = reactive({
  pageindex: 1,
  pagesize: 2,
  totalPage: 0,
  totalCount: 0,
});

onMounted(() => {
  getdata();
});

const tabledata = ref([]);
const getdata = () => {
  axios
    .get('http://localhost:5039/api/Sheep/EnterPriseList', {
      params: {
        pageindex: form.pageindex,
        pagesize: form.pagesize,
      },
    })
    .then((res) => {
      console.log(res);
      (tabledata.value = res.data.data),
        (form.totalPage = res.data.totalPage),
        (form.totalCount = res.data.totalCount);
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
